<template>
	<view :style="{ marginTop: statusBarHeight }">

		<view class="top_title">
			<view class="tit">
				<!-- 抢拍预约 -->
				{{$t('auction.appointment')}}
			</view>
			<view class="title" v-if="isLoginShow">
				{{$t('auction.description-begin')}} <span style="color: red;padding: 0 10px;">{{time}}</span>
				{{$t('auction.description-end')}}
			</view>
			<view class="" v-else>
				{{$t('auction.login.toSee')}}
			</view>
		</view>


		<!-- <navigator url="/pages/auction/auction_shopping/auction_shopping">
			<view>商品轻拍页面</view>
		</navigator> -->


		<!-- status: 1未预约2去抢拍 3已预约 4已过期 -->
		<view class="card" v-for="item in list">
			<view class="bgImg" style="width: 100%;height: 100%;">
				<image src="/static/images/auctionList1.jpg" style="width: 100%;height: 100%;" ></image>
			</view>
			<view class="card_box">
				
				<view class="time">
					{{item.seckillPeriod}}
				</view>
				<view style="display: flex;">
					<!-- :class='item.status==1?"blue":item.status==2?"red":item.status==3?"green":"brown"' -->
					<view :class='item.status==1?"red1":item.status==2?"red1":item.status==3?"red1":"red1"'
						style="margin-right: 10px;font-weight: bold;z-index: 22;">
						{{item.status==2?$t("auction.close"):item.status==3?$t("auction.start"):''}}
					</view>

					<view class="" v-if="item.distanceStartEnd != 0">


						<u-count-down ref="uCountDown"
							:color="item.status==1?'#027db4':item.status==2?'red':item.status==3?'green':'brown'"
							v-if="item.status != 4 " @end="end"
							:timestamp="Number(item.distanceStartEnd)"></u-count-down>
					</view>
				</view>
			</view>
			<view class="end">

				<view>


					<button @click="subscribe(item)"
						style="width: 100px;padding: 3px 0;height: 32px;line-height: 26px;font-size: 14px;"
						:class='item.status==1?"blue":item.status==2?"red":item.status==3?"green":"brown"'>{{item.status==1?$t("auction.status.reservation"):item.status==2?$t("auction.status.go"):item.status==3?$t("auction.status.booked"):$t("auction.status.expired")}}</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import {
		seckill,
		goReservation,
		todayReservation
	} from '@/api/new.js'
	import home from '@/components/home/index.vue';
	import {
		setTabBarText
	} from '@/libs/locale.js';
	import {
		toLogin
	} from '../../../libs/login';

	let app = getApp();
	export default {
		components: {
			home
		},
		data() {
			return {
				timestamp: 5,
				list: [],

				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				statusBarHeight: statusBarHeight,

				page: 1,
				limit: 4,
				loading: false,
				loadend: false,
				pageloading: false,
				dataList: [],
				returnShow: true,
				navH: '',
				time: '',
				isLoginShow: false

			};
		},
		onLoad() {



		},
		onShow() {
			if (uni.getStorageSync('USER_INFO')) {
				this.isLoginShow = true
				
				todayReservation().then(res => {
					this.time = res.message
				})
				
			} else {
				this.isLoginShow = false
			
			}
			this.getList();
			if (uni.getStorageSync('needUpdateTabBar')) {
				uni.removeStorageSync('needUpdateTabBar');
				setTabBarText.call(this);
			}


		},

		methods: {
			subscribe(e) {
				console.log('eee', e);
				let that = this
				let id = e.id
				if (e.status == 2) {
					uni.navigateTo({
						url: `/pages/auction/auction_shopping/auction_shopping?status=${e.status}&id=${e.id}&second=${e.distanceStartEnd}&timeRange=${e.seckillPeriod}`
					})
				} else if (e.status == 4) {
					that.$util.Tips({
						title: this.$t("auction.status.expired-tips")
					});
				} else {
					goReservation(id).then(res => {
						console.log(res, 'goReservation');

						switch (res.data.code) {
							case 2001:
								this.tips = this.$t('auctionTips.2001')
								break;
							case 2002:
								this.tips = this.$t('auctionTips.2002')
								break;
							case 2003:
								this.tips = this.$t('auctionTips.2003_1') + res.data.data + this.$t(
									'auctionTips.2003_2')
								break;
							case 2004:
								this.tips = this.$t('auctionTips.2004')

								break;
							case 2005:
								this.tips = this.$t('auctionTips.2005')
								this.timestamp = 0

								break;
							case 2006:
								this.tips = this.$t('auctionTips.2006')
								break;
							case 2007:
								this.tips = this.$t('auctionTips.2007')
								break;
						}

						that.$util.Tips({
							title: this.tips
						});
						that.getList()

					}).catch(err => {
						that.$util.Tips({
							title: err
						});
					})
				}

			},
			end(timestamp) {
				setTimeout(() => {
					this.getList();
					console.log('倒计时结束了,慢500毫秒刷新');
				}, 700)



			},
			// 事件触发，每秒一次
			change(timestamp) {
				console.log(timestamp);
			},
			// ref形式获取内部的值
			getSeconds() {
				console.log(this.$refs.uCountDown.seconds);
			},
			getList() {
				seckill().then(res => {
					console.log(res, 'res');
					this.list = res.data
				}).catch(err => {
					// that.$util.Tips({
					// 	title: err
					// });
					console.log(err, '12313123');
				})
			},
			// 是否已预约,进入购物车详情
			goDetails(id) {
				// 123
				let that = this;
				isPhotos(id).then(res => {
					if (res.data.code == 500) {
						console.log(res.data, id);
						that.$util.Tips({
							title: res.data.msg
						});
					} else {
						uni.navigateTo({
							url: '/pages/activity/goods_seckill_details/index?id=' + id
						})
					}
				})
			},
			//预约按钮
			yuyue(id) {
				console.log(id, 'id');
				let that = this;
				appointMent(id).then(res => {
					console.log(res.data, id);
					that.$util.Tips({
						title: res.message
					});

					that.getSeckillList(true)
					return
					// that.seckillList.forEach((item)=>{
					// 	item.reservationNum ==1?2:1
					// })
				})
			},

			//马上抢 查询是否已预约 状态
			nowBuy(item) {
				// let data = 6;
				let that = this;
				let info = {
					attrValueId: '',
					seckillId: '',
					productNum: '',
					productId: ''
				}
				console.log(item, 'item');
			},

			// tabs通知swiper切换

			tabsChange(index) {
				let that = this;
				that.swiperCurrent = index;
				that.page = 1;

				that.seckillList = [];
				that.getSeckillList();

				console.log(that.swiperCurrent, 'this.swiperCurrent', that.current);
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;


			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.page++
				this.getSeckillList()
			},
			getSeckillConfig: function() {
				let that = this;
				getSeckillHeaderApi().then(res => {
					res.data.map(item => {
						item.slide = JSON.parse(item.slide)
					})
					that.dataList = res.data;
					that.getSeckillList();
					that.seckillList = [];
					that.page = 1;
					that.status = that.dataList[that.active].reservationNum;
					that.getSeckillList();

				});
			},
			getSeckillList: function(refresh) {
				var that = this;
				var data = {
					page: that.page,
					limit: that.limit
				};
				// let timeId = 
				// if (that.loadend) return;
				// if (that.pageloading) return;
				// this.pageloading = true
				// let num = refresh?that.swiperCurrent:that.swiperCurrent+1
				let num = that.swiperCurrent + 1
				getSeckillList(num).then(res => {
					console.log('555res', res);
					// var seckillList = res.data.list;
					// var loadend = seckillList.length < that.limit;
					// that.page++;
					// if(that.page==1){
					// 	this.seckillList = res.data.list;
					// 	var loadend = seckillList.length < that.limit;
					// }else{
					// that.seckillList = that.seckillList.concat(seckillList)
					// }
					that.seckillList = res.data.list;
					// that.page = that.page;
					// that.pageloading = false;
					// that.loadend = loadend;

				}).catch(err => {
					that.pageloading = false

					console.log('123');
				});
			},
			settimeList: function(item, index) {
				var that = this;
				this.active = index
				if (that.interval) {
					clearInterval(that.interval);
					that.interval = null
				}
				that.interval = 0,
					that.countDownHour = "00";
				that.countDownMinute = "00";
				that.countDownSecond = "00";
				that.status = that.dataList[that.active].status;
				that.loadend = false;
				that.page = 1;
				that.seckillList = [];
				// wxh.time(e.currentTarget.dataset.stop, that);
				that.getSeckillList();
			},
		}
	};
</script>
<style style="scss" scoped>
	.title {
		font-size: 18px;
		padding: 10px 0;
		z-index: 222;
	}

	.brown {
		background-color: #7f7f7f;
		color: #fff;
		z-index: 222;
	}

	.red {
		background-color: red;
		color: #fff;
		z-index: 222;
	}

	.green {
		background-color: #4b7902;
		color: #fff;
		z-index: 222;
	}

	.blue {
		background-color: #027db4;
		color: #fff;
		z-index: 222;
	}

	.blue1 {
		color: #027db4;
	}

	.green1 {
		color: #4b7902;
	}

	.red1 {
		/* background-color: red; */
		/* color: red */
		color: #ffff7f;
	}

	.pad30 {
		padding: 0;
	}

	.acea-row.row-between-wrapper {}

	.top_title {
		margin: 10px;
		background-color: linear();
	}

	.tit {
		font-size: 24px;
		font-weight: bold;
		z-index: 222;
	}

	.card {
		position: relative;
		top: 0;
		background-color: #fff;
		margin: 10px;
		padding: 10px;
		display: flex;
		height: 130px;
		justify-content: space-between;
		flex-direction: column;
		
		
	}
.bgImg{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			opacity: 0.9;
		}
	.card_box {
		display: flex;
		justify-content: space-between;
	}

	.time {
		font-weight: bold;
		font-size: 36rpx;
		z-index: 222;
		color: #ffaa00;
		
	}

	.end {
		display: flex;
		justify-content: flex-end;
	}
</style>